<template>
  <v-row class="header-row">
    <v-col cols="12" md="4">
      <v-btn text class="home-btn" @click="goHome">首页</v-btn>
    </v-col>
    <v-col cols="12" md="3" class="search">
      <v-text-field v-model="keyWord" dense label="关键词"></v-text-field>
    </v-col>
    <v-col cols="12" md="1">
      <v-btn rounded color="#2196f3" dark @click="search">搜索</v-btn>
    </v-col>
    <v-col cols="12" md="4" v-if="!userInfo">
      <v-btn text class="header-btn" @click="register">注册</v-btn>
      <v-btn text class="header-btn" @click="login">登录</v-btn>
    </v-col>
    <v-col cols="12" md="4" v-else>
      <v-btn class="header-btn" text @click="logout">退出</v-btn>
      <v-btn class="header-btn" text @click="mine">{{userInfo.Name}}</v-btn>
      <v-avatar class="header-head">
        <img :src="userInfo.Face | toFaceUrl" />
      </v-avatar>
    </v-col>
  </v-row>
</template>

<script>
import storageService from "@/utils/storageService";
import { toFaceUrl } from "@/utils/url";
export default {
  name: "header-bar",
  data() {
    return {
      keyWord: "",
    };
  },
  computed: {
    userInfo() {
      if (storageService.get(storageService.USER_TOKEN)) {
        return this.$store.state.userInfo;
      } else {
        return null;
      }
    },
  },
  methods: {
    login() {
      this.$router.push({ name: "login" });
    },
    register() {
      this.$router.push({ name: "register" });
    },
    logout() {
      //清除token
      storageService.set(storageService.USER_TOKEN, "");
      //清除用户信息
      //storageService.set(storageService.USER_INFO,"")
      //清空vuex-along内容
      storageService.set(storageService.VUEX_ALONG, "");
      /* 刷新页面效率低，后期改 */
      this.$router.go(0);
    },
    mine() {
      this.$router.push({ name: "myVideo" });
    },
    goHome() {
      this.$router.push({ name: "home" });
    },
    search() {
      if (!this.keyWord) {
        this.$message.error("请输入关键词");
      } else {
        this.$router.push({ name: "search", params: { search: this.keyWord } });
      }
    },
  },
  filters: {
    toFaceUrl(name) {
      return toFaceUrl(name);
    },
  },
};
</script>

<style scoped>
.header-row {
  background-color: #fff;
  height: 65px;
}

.search {
  margin-top: 20px;
  padding-top: 0;
}

.home-btn {
  font-size: 20px;
  margin-left: 20px;
  color: #2196f3;
}

.header-btn {
  float: right;
  font-size: 20px;
  color: #2196f3;
}

.header-head {
  float: right;
  margin: 0 10px;
}
</style>